<template>
  <div class="modal fade"
       id="messageSettingModal"
       tabindex="-1"
       role="dialog"
       aria-labelledby="myModalLabel"
       aria-hidden="true">
    <div class="self-modal-dialog"
         style="width: 80vw; margin-top:50px; margin-left: 10vw">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button"
                  class="close"
                  @click="closeModal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h2 class="modal-title text-center">选取接受消息的楼盘
            <font color="red">(请先驻守楼盘，再配置接收消息的楼盘)</font>
          </h2>
        </div>
        <div class="modal-body">
          <div class="main-content">
            <div class="row">
              <div class="col-sm-12 col-md-12">
                <div class="screen-frame clearfix">
                  <div class="col-md-6 col-lg-6">
                    <div class="form-horizontal">
                      <div class="form-group">
                        <label class="col-md-3 col-sm-2 control-label">省份市区:</label>
                        <div class="col-md-9 col-sm-10">
                          <select class="form-control"
                                  style="width:32%;float:left"
                                  v-model="params.provId"
                                  v-on:change="getCity()">
                            <option value="-1">全部</option>
                            <option v-for="(province,index) in province_list"
                                    :value="province.id"
                                    :key="index">{{province.name}}</option>
                          </select>
                          <span style="float:left">-</span>
                          <select class="form-control"
                                  style="width:32%;float:left"
                                  v-model="params.cityId"
                                  v-on:change="getArea()">
                            <option value="-1">全部</option>
                            <option v-for="(city,index) in city_list"
                                    :value="city.id"
                                    :key="index">{{city.name}}</option>
                          </select>
                          <span style="float:left">-</span>
                          <select class="form-control"
                                  style="width:32%;float:left"
                                  v-model="params.areaId">
                            <option value="-1">全部</option>
                            <option v-for="(area,index) in area_list"
                                    :value="area.id"
                                    :key="index">{{area.name}}</option>
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="col-md-3 col-lg-3">
                    <div class="form-horizontal">
                      <div class="form-group">
                        <input type="text"
                               class="form-control"
                               placeholder="楼盘名称"
                               v-model="params.premisesName">
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-lg-3">
                    <div class="form-horizontal">
                      <div class="form-group">
                        <button type="submit"
                                class="btn screen-submit"
                                style="position:static;margin-left:10px;background-color: #3399cc;"
                                @click="premsiesList()">查询</button>
                        <button type="submit"
                                class="btn screen-submit"
                                style="position:static;margin-left:10px;background-color: #e96130;"
                                @click="confirmChecked()">确定</button>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4 col-lg-4">
                    <div class="form-horizontal">
                      <div class="form-group">
                        <label class="col-md-4 col-sm-4 control-label">楼盘状态:</label>
                        <div class="col-md-8 col-sm-8">
                          <select class="form-control"
                                  style="float:left"
                                  v-model="params.premisesStatus">
                            <option value="-1">全部</option>
                            <option value="0">待审核</option>
                            <option value="1">审核通过</option>
                            <option value="2">审核不通过</option>
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4 col-lg-4">
                    <div class="form-horizontal">
                      <div class="form-group">
                        <label class="col-md-4 col-sm-4 control-label">销售状态:</label>
                        <div class="col-md-8 col-sm-8">
                          <select class="form-control"
                                  style="float:left"
                                  v-model="params.saleStatus">
                            <option value="-1">全部</option>
                            <option value="0">待售</option>
                            <option value="1">在售</option>
                            <option value="2">售罄</option>
                            <option value="3">下架</option>
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="table-responsive tableHight">
                  <img src="../../../assets/images/sigh.svg"
                       style="width: 18px;padding-bottom: 3px;">
                  <span class="tips">已选中 {{ selectPremisesIds.length }} 个楼盘</span>
                  <!-- <div style="margin: 5px;">
									<span class="premisesSpan" v-for="(item, index) in selectPremisesNames" :key="index">{{ item }}</span>
								</div> -->
                  <table class="table table-striped table-bordered min-width-790">
                    <thead>
                      <tr>
                        <th width="5%">
                          <input type="checkbox"
                                 :checked="allCheck"
                                 @change="selectChange" />
                        </th>
                        <th width="10%">省份</th>
                        <th width="10%">城市</th>
                        <th width="10%">地区</th>
                        <th width="30%">楼盘名称</th>
                        <th width="10%">楼盘状态</th>
                        <th width="10%">销售状态</th>
                        <th width="10%">项目经理</th>
                      </tr>
                    </thead>
                    <tbody ref="table">
                      <tr v-for="(row, index) in premisesList"
                          :key="index">
                        <td><input type="checkbox"
                                 class="singleCheckbox"
                                 :value="row.id"
                                 v-model="selectPremisesIds"
                                 :data-id="row.id"
                                 :data-name="row.name"
                                 @change="singleSelectChange($event,row)" /></td>
                        <td>{{row.provName}}</td>
                        <td>{{row.cityName}}</td>
                        <td>{{row.areaName}}</td>
                        <td style="text-align: left;">{{row.premisesName}}</td>
                        <td>{{row.premisesStatusName}}</td>
                        <td>{{row.saleStatusName}}</td>
                        <td>{{row.manager}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div id="laypage_premisesList"></div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: [],
      params: {
        premisesName: "",
        provId: "-1",
        cityId: "-1",
        areaId: "-1",
        companyUuid: sessionStorage.companyUuid || "",
        partnerId: 0,
        premisesStatus: "-1",
        saleStatus: "-1",
      },
      name: "",
      premisesList: [],
      selectPremisesIds: [],
      // selectPremisesNames: [],
      province_list: [],
      city_list: [],
      area_list: [],
      allCheck: false,
      btnShow: true,
    };
  },
  props: { bindPremisesInfo: [Object], messageModalShow: [Boolean] },
  components: {},
  watch: {
    "bindPremisesInfo.partnerId": {
      handler: function (val, oldVal) {
        if (val) {
          this.params.partnerId = val;
        }
      },
      //深层监听，当位对象时，若设为true，属性变更时即可触发，若为false，属性无法监听到
      deep: true,
    },
    messageModalShow(v) {
      if (v) {
        this.premsiesList();
      }
    },
  },
  mounted() {
    this.provinceList();
  },
  methods: {
    closeModal() {
      this.params.premisesName = "";
      this.params.provId = "-1";
      this.params.cityId = "-1";
      this.params.areaId = "-1";
      this.params.premisesStatus = "-1";
      this.params.saleStatus = "-1";
      this.selectPremisesIds = [];
      // this.selectPremisesNames = [];
      this.$emit("closeMessageModal");
      $("#messageSettingModal").modal("hide");
    },
    initAllCheck() {
      var _self = this;
      let checkDom = _self.$refs.table.getElementsByClassName("singleCheckbox");
      let count = 0;
      for (var ii = 0; ii < checkDom.length; ii++) {
        if (checkDom[ii].checked) {
          count++;
        }
      }
    },
    selectChange(e) {
      var _self = this;
      var checked = e.target.checked;
      if (checked) {
        _self.premisesList.forEach((item) => {
          item.wxMsgStatus = "1";
        });
      } else {
        _self.premisesList.forEach((item) => {
          item.wxMsgStatus = "0";
        });
      }
      _self.allCheck = checked;
      let checkDom = _self.$refs.table.getElementsByClassName("singleCheckbox");
      // 获取当前页Dom
      // 选中状态: 添加选中值
      // 取消选中: 全部清空历史选中值
      for (var ii = 0; ii < checkDom.length; ii++) {
        checkDom[ii].checked = checked;
        var premisesId = checkDom[ii].dataset.id;
        var idIndex = _self.selectPremisesIds.indexOf(parseInt(premisesId));
        // 选中要过滤掉重复
        if (checked) {
          if (idIndex < 0) {
            _self.selectPremisesIds.push(parseInt(premisesId));
          }
        } else {
          // 不选中要清除掉以选中数据
          if (idIndex >= 0) {
            _self.selectPremisesIds.splice(idIndex, 1);
          }
        }
      }
      _self.selectPremisesIds = Array.from(new Set(_self.selectPremisesIds));
    },
    singleSelectChange(e, row) {
      var _self = this;
      var checked = e.target.checked;
      row.wxMsgStatus = e.target.checked ? "1" : "0";
      var premisesName = e.target.dataset.name;
      if (!checked) {
        _self.allCheck = checked;
        // var index = _self.selectPremisesNames.indexOf(premisesName);
        // _self.selectPremisesNames.splice(index, 1);
      } else {
        // _self.selectPremisesNames.push(premisesName)
      }
      _self.initAllCheck();
    },
    confirmChecked() {
      var _self = this;
      _self.getPremisesReturn();
      _self.closeModal();
    },
    getPremisesReturn() {
      var _self = this;
      if (!_self.btnShow) {
        layer.msg("请勿重复操作！");
        return;
      }
      var params = {};
      var caseMemberWxStatus = [];
      //操作类型为新增时，将机构ID设为空,否则会执行修改操作
      var url =
        _self.utilHelper.apiUrl + "/api/caseMember/batchUpdateCaseMember";
      _self.premisesList.forEach((item) => {
        if (_self.selectPremisesIds.indexOf(item.id) !== -1) {
          item.wxMsgStatus = "1";
        }
        caseMemberWxStatus.push({ id: item.id, wxMsgStatus: item.wxMsgStatus });
      });
      params.caseMemberWxStatus = caseMemberWxStatus;
      // params.partnerId = _self.bindPremisesInfo.partnerId;
      _self.btnShow = false;
      _self.$http.post(url, { params: params }).then(
        (response) => {
          var resData = response.body.resData;
          var result = response.body.result;
          var resultMsg = "服务器忙,请刷新页面重试!";
          if ("1" == result) {
            resultMsg = "操作成功!";
          }
          //输出操作信息
          layer.msg(
            resultMsg,
            {
              time: 1000,
            },
            function () {
              //关闭弹出层
              _self.btnShow = true;
            }
          );
        },
        (response) => {
          layer.msg(
            "服务器忙,请刷新页面重试!",
            {
              time: 1000,
            },
            function () {
              //关闭弹出层
              _self.btnShow = true;
            }
          );
        }
      );
    },
    premsiesList() {
      var _self = this;
      _self.params.partnerId = _self.bindPremisesInfo.partnerId;
      var url =
        _self.utilHelper.apiUrl +
        "/api/staff/getPremisesAndCaseMemberByStaffId";
      _self.$http.post(url, { params: _self.params }).then(
        (response) => {
          if (response.body.result === "1") {
            _self.premisesList =
              response.body.resData.premisesAndCaseMemberList || [];
            _self.selectPremisesIds = [];
            _self.premisesList.forEach((item) => {
              if (item.wxMsgStatus === "1") {
                item.checked = true;
                _self.selectPremisesIds.push(item.id);
              }
            });
            _self.$nextTick(() => {
              _self.initAllCheck();
            });
          }
        },
        (response) => {
          layer.msg("服务器忙,请刷新页面重试!", {
            time: 1000,
          });
        }
      );
    },
    provinceList: function () {
      var _self = this;
      var body = {};
      body.params = {};
      var url = _self.utilHelper.apiUrl + "/api/getProvince.do";
      _self.$http.post(url, body).then((response) => {
        var resData = response.body.resData;
        if (resData.result == "1") {
          _self.province_list = resData.areaList;
        }
      });
    },
    getCity: function () {
      var _self = this;
      var provinceId = _self.params.provId;
      if (!provinceId) {
        provinceId = 0;
      }
      var body = {};
      body.params = {
        areaId: provinceId,
      };
      var url = _self.utilHelper.apiUrl + "/api/getCity.do";
      _self.$http.post(url, body).then((response) => {
        var resData = response.body.resData;
        if (
          resData.result == "1" ||
          (resData.areaList && resData.areaList.length > 0)
        ) {
          _self.city_list = resData.areaList;
          _self.params.cityId = "-1";
          _self.params.areaId = "-1";
          _self.premises_area_list = [];
        }
      });
    },
    getArea: function () {
      var _self = this;
      var cityId = _self.params.cityId;
      if (!cityId) {
        cityId = 0;
      }
      var body = {};
      body.params = {
        areaId: cityId,
      };
      var url = _self.utilHelper.apiUrl + "/api/getArea.do";
      _self.$http.post(url, body).then((response) => {
        var resData = response.body.resData;
        if (resData.result == "1") {
          _self.params.areaId = "";
          _self.area_list = resData.areaList;
        }
      });
    },
  },
};
</script>
<style>
input[type="checkbox"] {
  width: 15px;
  height: 15px;
}
.premisesSpan {
  border: 1px solid;
  padding: 5px 5px;
  color: #fff;
  background-color: #f90;
  border-radius: 10px;
  margin: 5px 5px;
  display: inline-block;
}
#messageSettingModal .tableHight {
  height: 400px !important;
}
#messageSettingModal .control-labelTwo {
  padding-left: 5px !important;
  padding-right: 5px !important;
}
#messageSettingModal .divLeft {
  float: left;
}
</style>
